<template>
    <div class="invite">
        <wxc-minibar  title="邀请好友" >
        </wxc-minibar>
        <div class="invite-content">
            <text style="font-family: 'PingFangSC-Medium';font-size: 40px;font-weight:bold;color: #333333;margin-top:128px;">呼唤朋友，来赚钱</text>
            <image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/zhongcai/qrcode.png" style="width:240px;height:240px;margin-top:100px;margin-bottom:80px;"></image>
            <text class="invite-tip">扫码邀请好友</text>
            <text class="invite-tip">专属邀请码:{{inviteCode}}</text>
            <div class="invite-result">
                <div style="align-items:center">
                    <text class="invite-label">成功邀请（人）</text>
                    <text class="invite-result-content">24</text>
                </div>
                <div style="align-items:center">
                    <text class="invite-label">累计奖励（元）</text>
                    <text class="invite-result-content">600</text>
                </div>
            </div>
            <button class="submit" @click="submit"><text style="font-size:32px;color:#ffffff;">去邀请</text></button>
        </div>

    </div>
</template>

<script>
import WxcMinibar from "@/components/modules/wxc-minibar/index.js";
export default {
  components: {
    WxcMinibar
  },
  data() {
    return {
      inviteCode: "jsic25"
    };
  },
  methods: {
    submit() {
      console.log("邀请");
    }
  }
};
</script>

<style lang="" scoped>
.invite {
  width: 750px;
}
.header-title {
  font-family: "PingFangSC-Medium";
  font-size: 34px;
  color: #333333;
}
.invite-content {
  width: 750px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.invite-result {
  width: 750px;
  flex-direction: row;
  justify-content: space-around;
}
.invite-label {
  font-family: "PingFangSC-Regular";
  font-size: 28px;
  color: #a7a7a7;
  line-height: 120px;
}
.invite-result-content {
  font-family: "PingFangSC-Medium";
  font-size: 48px;
  color: #333333;
}
.invite-tip {
  font-family: "PingFangSC-Regular";
  font-size: 32px;
  color: #333333;
  line-height: 50px;
}

.submit {
  width: 622px;
  height: 96px;
  background-color: #e70d0d;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-top: 93px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>